<script setup lang="ts">
import router from "@/router";
import {useLayoutStore} from "@/stores/layout";
import CoachCard from "@/components/school/CoachCard.vue";
import {ref} from 'vue'
import CommentItem from "@/components/comment/CommentItem.vue";
import type {Comment} from "@/type/comment";

const props = defineProps<{
  path?: string
}>()

const {setActive} = useLayoutStore()
const list = ref<Comment[]>([]); // 评论列表数据
const loading = ref(false); // 评论列表是否正在加载
const finished = ref(false); // 评论列表是否全部加载
const show = ref(false); // 显示发表评论
const score = ref(0); // 发表评论的分数
const text = ref(''); // 发表评论的文本


const back = () => {
  setActive(props.path === '/school' ? 0 : 2)
  router.push(props.path ?? '/school')
}

const onLoad = async () => {
  // 模拟异步更新数据
  await new Promise(resolve => setTimeout(resolve, 1000))
  // 添加 10 条数据
  for (let i = 0; i < 10; i++) {
    list.value.push({
      content: '为人师表，教学先进。教学认真，教学耐心。教学认真，教学耐心。教学认真，教学耐心。教学认真，教学耐心。教学认真，教学耐心。教学认真，教学耐心。',
      createTime: '2023-03-03',
      id: i,
      score: 4.5,
      user: {
        id: i,
        avatar: '/api/images/avatar.jpg',
        nickname: 'Jvyou'
      }
    })
  }

  loading.value = false
  if (list.value.length >= 50) {
    finished.value = true
  }
}

const makeComment = () => {
  console.log(score.value, text.value)
}
</script>

<template>
  <div class="coach-info-box">
    <van-nav-bar title="我的教练" left-text="返回" left-arrow @click-left="back"/>
    <CoachCard :name="'张三'"
               avatar="/api/images/avatar.jpg"
               :stu-num="254"
               :teaching-year="14"
               :score="4.5"
               action="评论"
               action-icon="records-o"
               @click="show = true"
               style="margin: 10px 0;"
    />
    <!--评论列表开始-->
    <van-list v-model:loading="loading"
              :finished="finished"
              finished-text="没有更多了"
              @load="onLoad"
    >
      <div v-for="item in list" :key="item.id">
        <CommentItem :avatar="item.user.avatar"
                     :nickname="item.user.nickname"
                     :content="item.content"
                     :score="item.score"
                     :create-time="item.createTime"
        />
      </div>
    </van-list>
    <!--评论列表结束-->
    <van-action-sheet v-model:show="show" title="发表评论">
      <van-form @submit="makeComment" class="comment-add-form">
        <van-cell-group inset>
          <van-field name="rate" label="总体评价">
            <template #input>
              <van-rate v-model="score" color="#ffd21e" size="24" allow-half/>
            </template>
          </van-field>
          <van-field v-model="text"
                     rows="3"
                     autosize
                     label="评价"
                     type="textarea"
                     maxlength="50"
                     placeholder="请输入留言"
                     show-word-limit
          />
          <VanButton type="primary" native-type="submit" block>发表评论</VanButton>
        </van-cell-group>
      </van-form>
    </van-action-sheet>
  </div>
</template>

<style scoped lang="less">
.coach-info-box {
  width: 100vw;
  min-height: 100vh;
  background-color: var(--jvyou-school-background-color);

  .comment-add-form {
    min-height: 40vh;
  }
}
</style>
